<template>
  <div v-if="visible" class="popup-overlay" @click.self="close">
    <div class="popup-content">
      <div class="title flex items-center justify-between">
        <div class="text">选择售后类型</div>
        <div @click="close" class="iconfont icon-guanbi font-size-22"></div>
      </div>

      <div class="content">
        <div @click="clickTuiHuo(1)" class="left">
          <div class="flex flex-col items-center justify-center m-t-30">
            <w-image :src="yuandanImg" width="168rpx" height="168rpx" />
            <div class="font-size-18 color-1">原单冲账</div>
          </div>
          <div class="m-t-10 w-100 p-x-15 m-b-38">
            顾客能够提供付款凭证，按销售单据中的商品退货
          </div>
        </div>
        <div @click="clickTuiHuo(2)" class="right">
          <div class="flex flex-col items-center justify-center m-t-30">
            <w-image :src="wuxiaopiaoImg" width="168rpx" height="168rpx" />
            <div class="font-size-18 color-1">无小票退货</div>
          </div>
          <div class="m-t-10 w-100 p-x-15 m-b-38">
            顾客无法提供付款凭证，按门店实收退货商品为准
          </div>
        </div>
      </div>
    </div>
  </div>

  <ChongzhangSaomaPopup @confirm="popupConfirm" ref="ChongzhangSaomaPopupRef" />
  <ChongzhangListPopup ref="ChongzhangListPopupRef" />
</template>

<script setup>
import { ref } from "vue";
import yuandanImg from "@/static/images/document-log/shouhou_1.png";
import wuxiaopiaoImg from "@/static/images/document-log/shouhou_2.png";
import ChongzhangSaomaPopup from './chongzhang-saoma-popup.vue'
import ChongzhangListPopup from './chongzhang-list-popup.vue'
const ChongzhangListPopupRef = ref()
const ChongzhangSaomaPopupRef = ref()
const visible = ref(false);


function popupConfirm(val) {
  ChongzhangSaomaPopupRef.value.close()
  ChongzhangListPopupRef.value.open()
}
function clickTuiHuo(type) {
  switch (type) {
    case 1:
      close()
      ChongzhangSaomaPopupRef.value.open()
      break;
  
    default:
      break;
  }
}

function open() {
  visible.value = true;
}

function close() {
  visible.value = false;
}

defineExpose({ open, close });
</script>

<style scoped lang="scss">
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.popup-content {
  background: #fff;
  // padding: 24px;
  border-radius: 8px;
  width: 754rpx;
  height: 450rpx;
  .title {
    padding: 16rpx 30rpx;
    color: $uni-text-color-1;
    font-size: 22rpx;
    border-bottom: 1rpx solid $uni-border-color-1;
  }

  .content {
    padding: 30rpx 62rpx 40rpx;
    display: flex;
    justify-content: space-between;
    gap: 30rpx;
    .left,
    .right {
      flex: 1;
      width: 0;
      border:1rpx solid $uni-border-color-1;
      border-radius: 8rpx;
    }
  }
}
</style>
